<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="oP"></p>
  <input type="text" id="oInput">
  <script>
    const o = {
      msg: '',
      address: ''
    };
    /* const oCopy = { ...o }
    Object.keys(oCopy).forEach(item => {
      Object.defineProperty(o, item, {
        get() {
          return oCopy[item]
        },
        set(newValue) {
          oP.innerHTML = newValue
          oInput.value = newValue
          oCopy[item] = newValue
        }
      })
    });

    oInput.oninput = function (e) {
      o.xxx = e.target.value
    }; */

    // 优点：解决了 Vue2 哪些非响应式的情况；性能高！
    const p = new Proxy(o, {
      get(target, attr) {
        // target => o
        // attr => msg、address
        return target[attr]
      },
      set(target, attr, newValue) {
        oP.innerHTML = newValue
        oInput.value = newValue
        target[attr] = newValue
      }
    })
    oInput.oninput = function (e) {
      // p.msg = e.target.value
      p.xxx = e.target.value
    };
  </script>
</body>

</html>